<template>
	<view>
    <!-- <u-image style="line-height: 0" mode="widthFix" width="100%" height="auto" src="@/static/images/top-banner-ucp.jpg"></u-image> -->
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30 u-p-t-30" style="align-items: flex-start;">
			<view class="u-m-r-10">
				<u-avatar v-if="user.store" :src="user.store.cover" size="140" mode="square"></u-avatar>
			</view>
			<view class="u-flex-1">
				<view class="u-font-18 u-p-b-2" style="color: rgb(30, 96, 211);font-size: 1.2em;font-weight: 600;" v-if="user.store">{{user.store.shop_name}}</view>
				<view class="user-level" v-if="user.store && user.store.store_categories">
					<view class="level-name" v-for="cat in user.store.store_categories">{{cat.name}}</view>
				</view>
				<view class="level-validity">
					<view class="expire-time" v-if="user.store"><u-icon name="map" style="margin-right: .5em;"></u-icon> {{user.store.address}}</view>
				</view>
			</view>
		</view>

		<view class="u-m-t-20" v-if="user.store.admin_id===user.id">
			<u-grid :col="2">
				<u-grid-item @click="openPage('/pages/ucp/store-manage/withdraw')">
					<view class="balance golden">{{user.store.balance||0}}</view>
					<view class="grid-text">门店余额</view>
				</u-grid-item>
				<u-grid-item @click="openPage('/pages/ucp/store-manage/store-manage')">
					<view class="balance golden"><template>{{user.store.staff_num||0}}</template></view>
					<view class="grid-text">员工</view>
				</u-grid-item>
			</u-grid>
		</view>

		<!-- <view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="order" title="我的订单" @click="openPage('/pages/ucp/orders')">全部订单</u-cell-item>
			</u-cell-group>
			<u-grid :col="4" :border="false">
				<u-grid-item @click="openPage('/pages/ucp/orders',{state:'pending_pay'})">
					<u-badge :count="orderSummary.pending_pay" :offset="[20, 60]"></u-badge>
					<u-icon name="rmb" :size="36"></u-icon>
					<view class="grid-text">待支付</view>
				</u-grid-item>
				<u-grid-item @click="openPage('/pages/ucp/orders',{state:'pending_send'})">
					<u-badge :count="orderSummary.pending_send" :offset="[20, 60]"></u-badge>
					<u-icon name="car" :size="36"></u-icon>
					<view class="grid-text">待发货</view>
				</u-grid-item>
				<u-grid-item @click="openPage('/pages/ucp/orders',{state:'pending_receive'})">
					<u-badge :count="orderSummary.pending_receive" :offset="[20, 60]"></u-badge>
					<u-icon name="hourglass" :size="36"></u-icon>
					<view class="grid-text">待收货</view>
				</u-grid-item>
				<u-grid-item @click="openPage('/pages/ucp/orders',{state:'pending_redeem'})">
					<u-badge :count="orderSummary.pending_redeem" :offset="[20, 60]"></u-badge>
					<u-icon name="coupon" :size="36"></u-icon>
					<view class="grid-text">待使用</view>
				</u-grid-item>
			</u-grid>
		</view> -->

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item title="门店管理" :arrow="false" hover-class="none"></u-cell-item>
			</u-cell-group>
			<u-grid :col="4" :border="false">
				<u-grid-item @click="openPage('/pages/ucp/store-manage/store-manage',{action:'pending'})">
					<u-image src="/static/images/icon-staff.png" width="56rpx" height="56rpx" mode="widthFix" :lazy-load="true"></u-image>
					<view class="grid-text">店员管理</view>
				</u-grid-item>
				<u-grid-item @click="openPage('/pages/ucp/store-manage/order-ucp',{action:'verify'})">
					<u-image src="/static/images/icon-scan.png" width="56rpx" height="56rpx" mode="widthFix" :lazy-load="true"></u-image>
					<view class="grid-text">验提货码</view>
				</u-grid-item>
				<u-grid-item @click="openPage('/pages/ucp/store-manage/voucher-ucp',{})">
					<u-image src="/static/images/icon-voucher.png" width="56rpx" height="56rpx" mode="widthFix" :lazy-load="true"></u-image>
					<view class="grid-text">卡券核销</view>
				</u-grid-item>
				<u-grid-item @click="openPage('/pages/ucp/store-manage/store-inventory',{})">
					<u-image src="/static/images/icon-inventory.png" width="56rpx" height="56rpx" mode="widthFix" :lazy-load="true"></u-image>
					<view class="grid-text">商品库存</view>
				</u-grid-item>
				<u-grid-item>
					<!-- <u-image src="/static/images/icon-inventory.png" width="56rpx" height="56rpx" mode="widthFix" :lazy-load="true"></u-image> -->
					<!-- <view class="grid-text">商品库存</view> -->
				</u-grid-item>
				<u-grid-item @click="openPage('/pages/ucp/store-manage/order-ucp-list',{action:'pending'})">
					<u-image src="/static/images/icon-log.png" width="56rpx" height="56rpx" mode="widthFix" :lazy-load="true"></u-image>
					<view class="grid-text">提货记录</view>
				</u-grid-item>
				<u-grid-item @click="openPage('/pages/ucp/store-manage/voucher-ucp-list',{action:'pending'})">
					<u-image src="/static/images/icon-redeem.png" width="56rpx" height="56rpx" mode="widthFix" :lazy-load="true"></u-image>
					<view class="grid-text">核销记录</view>
				</u-grid-item>
				
			</u-grid>
		</view>
		
		<view class="u-m-t-20" v-if="store_qr_code">
			<u-cell-group>
				<u-cell-item title="门店邀请码" :arrow="false" hover-class="none"></u-cell-item>
			</u-cell-group>
			<view style="padding: 30rpx; display: flex; justify-content: center; align-items: center;">
				<u-image :src="store_qr_code" width="280" height="280" :lazy-load="false"></u-image>
			</view>
		</view>

		<wx-share :title='shop.name' :desc="shop.store_introduction" :imgUrl="shop.cover" :link="currentPage" ref="wxs">
		</wx-share>
		<custom-tabbar></custom-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentPage: location.href,
				scrollTop: 0,
				loadStatus: 'loadmore',
				flowList: [],
				shop: {},
				user: {},
				orderSummary: {
					pending_pay: 1,
					pending_send: 10,
					pending_receive: 0
				},
				itemList: [],
				paging: {
					sort_type: 'recommend',
					page_size: 50,
					current_page: 1,
					keyword: '',
					category_id: 0,
					total_pages: 1
				},
				loadStatus: 'loadmore',
				loadText: {
					loadmore: '加载更多',
					loading: '努力加载中',
					nomore: '加载完毕'
				},
				current: 0,
				activeCashBack: {},
				store_qr_code:''
			}
		},
		computed: {
			levelName() {
				if (this.user && this.user.level) {
					return this.user.level.level_name;
				}
				return '会员'
			},
			levelIconUrl(){
				let icon = '@/static/images/level_icon_1.png'

				return icon
			},
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			this.getItemList();
			this.getShop();
			this.fetchStoreQrcode()
		},
		mounted() {
			this.getUserInfo()
		},
		onShow() {
			this.getUserInfo()
			this.getCart()
			this.getOrderSummary()
			this.getActiveCashBack()
		},
		onReachBottom() {
			if (this.paging.current_page >= this.paging.total_pages) {
				this.loadStatus = 'nomore';
				return;
			}
			this.loadStatus = 'loading';
			this.paging.current_page = ++this.paging.current_page;
			this.getItemList()
		},
		methods: {
			getActiveCashBack(){
				this.$u.post('/shopping/get-active-cash-back', {}).then(res => {
					this.activeCashBack = res;
				}).catch(e => {

				})
			},
			redeemCashBack(){
				this.$u.post('/shopping/redeem-cash-back', {}).then(res => {
					this.activeCashBack = {};
					this.getUserInfo()
				}).catch(e => {
					console.log(e)
				})
			},
			getShop() {
				this.$u.post('/shopping/shop-setting', {}).then(res => {
					this.shop = res;
				}).catch(e => {

				})
			},
			fetchStoreQrcode(){
				this.$u.post('/store-manage/store-qr-code', {}).then(res => {
					this.store_qr_code = res.code_url;
				}).catch(e => {
				
				})
			},
			switchTab(jumpURL) {
				uni.switchTab({
					url: jumpURL
				})
			},
			getUserInfo() {
				this.$u.post('/user/info', {}).then(res => {
					console.log(res)
					this.user = res;
					if (this.user.verified!=='yes') {
						uni.showToast({
							title: '请先完成车主注册'
						})
						this.openPage('/pages/ucp/profile')
					}
				}).catch(e => {
					console.log(e)
				})
			},
			openPage(jumpURL, params = {}) {
				this.$u.route({
					type: 'to',
					params: params,
					url: jumpURL,
					animationType: 'slide-in-bottom'
				});
			},
			getItemList() {
				this.$u.post('/item/list', {
					page_size: this.paging.page_size,
					current_page: this.paging.current_page,
					sort: this.paging.sort_type
				}).then(res => {
					if (res.page.current_page === 1) {
						this.itemList = res.list;
					} else {
						this.itemList = this.itemList.concat(res.list);
					}
					this.paging.current_page = res.page.current_page;
					this.paging.total_pages = res.page.total_pages;
					this.paging.page_size = res.data.page_size;
				}).catch(e => {

				})
			},
			addToCart(itemId) {
				this.$u.post('/shopping/add-to-cart', {
					item_id: itemId
				}).then(res => {
					console.log(res)
					let qty = 0;
					for (let i = 0; i < res.length; i++) {
						qty += res[i].quantity;
					}
					// uni.setTabBarBadge({
					// 	index: 1,
					// 	text: qty.toString()
					// })
				}).catch(e => {

				})
			},
			getCart() {
				this.$u.post('/shopping/cart-list', {}).then(res => {
					console.log(res)
					let qty = 0;
					for (let i = 0; i < res.length; i++) {
						qty += res[i].quantity;
					}
					// if (qty > 0) {
					// 	uni.setTabBarBadge({
					// 		index: 1,
					// 		text: qty.toString()
					// 	})
					// } else {
					// 	uni.removeTabBarBadge({
					// 		index: 1
					// 	})
					// }
				}).catch(e => {

				})
			},
			getOrderSummary() {
				this.$u.post('/payment/order-summary', {}).then(res => {
					this.orderSummary = res;
				}).catch(e => {

				})
			},
			loadMore() {
				console.log('load more')
				if (this.paging.current_page < this.paging.total_pages) {
					this.paging.current_page = this.paging.current_page + 1;
					this.getItemList();
				}
			},
			logout() {
				this.$u.post('/user/logout', {}).then(res => {
					uni.removeStorageSync('token');
					this.openPage('/pages/login/index')
				}).catch(e => {

				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #fff;
	}
	
	.user-level{
		display:inline-block;
		line-height: 1.8;
		color: #fcc200;
		border-radius: 4px;
		font-size: 24rpx;
		.level-name{
			display:inline-block;
			padding:0 20rpx;
			clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
			border-radius: 4px;
			margin-right: 20rpx;
			background-color: #1f61d4;
			color: #fff;
			margin-bottom: 10rpx;
		}
	}
	
	.level-validity{
		padding: 0 10rpx;
		line-height: 1.8;
		font-size: 24rpx;
		color:#020402;
		.expire-time{
			display:inline-block;
		}
		.renew-vip{
			padding: 0 20rpx;
			display:inline-block;
			color: #195ed7;
		}
	}

	.inline-block{
		display: inline-block;
		padding-left:.5em;
	}

	.balance {
		font-size: 48rpx;
		font-weight: bold;
	}

	.balance.golden {
		color: #195ED7;
	}

	.balance.silver {
		color: #969695;
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}

	.u-wrap {
		background-color: #FFF;
	}

	.item-title {
		font-size: 28rpx;
		line-height: 1.8;
		height: 108rpx;
		box-sizing: border-box;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: calc(100vw/2 - 38px);

		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		display: -moz-box;
		-moz-line-clamp: 2;
		-moz-box-orient: vertical;
		overflow-wrap: break-word;
		word-break: break-all;
		white-space: normal;
		overflow: hidden;
	}

	.item-remark {
		font-size: 26rpx;
		color: #333333;
		font-weight: 300;
		line-height: 1.8;
		height: 44rpx;
		margin-bottom: 10rpx;
	}

	.original-price {
		color: #333333;
		text-decoration: line-through;
		height: 38rpx;
	}

	.item-buy {
		display: flex;
		flex-direction: row;
	}

	.price {
		flex: 1;
		color: red;
	}

	.price .value {
		font-size: 42rpx;
		font-weight: bold;
	}

	.price .unit {
		font-weight: 300;
		color: #CCC;
		display: inline;
	}

	.add-to-cart {
		width: 48rpx;
	}

	.water-item {
		border-radius: 16rpx;
		margin: 10rpx 0;
		background-color: #fff;
		padding: 16rpx;
		position: relative;
	}

	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
		}
	}

	.user-box {
		background-color: #fff;
	}
	.cash-back-wrap{
		border-radius:8rpx;
		background-color: darkorange;
		color:white;
		padding:.3em;
		margin-top:20rpx;
		margin-bottom:0;
		line-height: 1.8;
		.title{
			font-size: 1.4em;
			border-bottom: 1px dashed;
		}
	}
	.terms-link{
		display:inline-block;
		text-decoration: underline;
		padding-left: 8rpx;
	}
	.store-title{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>